<!--  -->
<template>
  <div class="echarts" id="Echarts">

  </div>
</template>

<script>
import echarts from "echarts";
import echartsOption from "../utils/echarts";
import pieOption from '../utils/pie';
export default {
  name: "Echarts",
  components: {},
  props: {
    type:{
      type:Number,
      default:()=>{
        return 1
      }
    },
    optionData: {
      type: Object,
      default: () => {
        return {
          data: []
        };
      },
      required: true
    }
  },
  data() {
    return {
      Echarts: {},
      echartsOption:{},
      pieOption:{}
    };
  },
  computed: {},
  watch: {
    optionData(newValue, oldValue) {
      this.echartsOption.setContentData(newValue.data);
      this.Echarts.setOption(this.echartsOption.option,true);
    }
  },
  methods: {},
  created() {},
  mounted() {
    this.Echarts = echarts.init(document.getElementById("Echarts"));
    if(this.type==1){
      this.echartsOption = new echartsOption();
    }
    else{
      this.echartsOption = new pieOption();
    }
    window.onresize = () => {
      this.Echarts.resize();
    };
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.echarts {
  width: 100%;
  height: 100%;
}
</style>